<template>
	<view class="jobLisPage">
		<!-- <image src="/static/image/userImg/bg.png" mode="" class="bgImg"></image> -->
		<view class="searchBox pL15 pR15 bgf pB10">
			<view class="flex jst-between alg-center" >
				<u-search style="width: calc(100% - 60rpx);" placeholder="搜索职位" v-model="query.oddJobName" height="80" :show-action="false"
					bg-color="#F7F8FB" shape="square" @change='search'>
				</u-search>
				<image v-if="selColor" src="/static/image/selSelect.png" mode="" class="selImg mL10" @click="openJobSel"></image>
				<image v-else src="/static/image/selIcon.png" mode="" class="selImg mL10" @click="openJobSel"></image>
				
			</view>
			<view class="flex alg-center jst-between mT20">
				<block v-for="(item,i) in tabLis" :key="i">
					<view v-if="item.text!='已报名'&&item.text!='已拒绝'" @click="changeTab(item,i)" class="tabItem font32" :class="curretnTab==i?'active':''">
						<text class="relative">{{item.text}}</text>
					</view>
				</block>
			</view>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="210">
			<view class="pB15 mL15 mR15">
				<view v-for="(item,i) in list" :key="i" class="oddItem mB15" @click="xf.onlineUtils.route(`pages/common/myJobDetail/index?id=${item.id}&xfOddGeneralId=${userId}&regisId=${item.regisid}&title=灵工详情`)">
					<view class="flex alg-center jst-between">
						<view class="txt-ellipsis w75 font18">{{item.oddJobName}}</view>
						<view class="u-blue font15">
							{{item.orderTypeText}}
						</view>
					</view>
					<view class="flex font28 mT15">
						<text class="u-8bd">工种类型</text>
						<text class="mL25">{{item.oddJobTypeText}}</text>
					</view>
					<view class="flex font28 mT15">
						<text class="u-8bd">工作时间</text>
						<text class="mL25">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</text>
					</view>
					<view v-if="item.izGetMoney == 2"  class="platform-audit">
						<image class="imgW32" :src="resources.warring"
							mode=""></image>
						<text class="font14 u-org mL10">平台审核后，工资将会发放显示</text>
					</view>
					<view class="flex jst-between mT15 alg-center">
						<view class="u-red"><text class=" font20">{{item.salary}}</text><text class="font13 let-spc3">元</text></view>
						<block v-if="item.orderType==1">
							
							<view class="pointer bmBtn" @click.stop="xf.onlineUtils.route(`/pages/common/startWorkCode/index?orderId=${item.orderid}&regisId=${item.regisid
}`)">开工码</view>
						</block>
						<block v-else-if="item.orderType==2">
							<view class="flex alg-center">
								<view class="pointer bmBtn " @click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${item.id}&orderId=${item.orderid}&type=1`)">上传凭证</view>
								<view class="pointer bmBtn mL10" @click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${item.id}&orderId=${item.orderid}&regisId=${item.regisid}&type=2`)">已完工</view>
							</view>
						</block>
						<block v-else-if="item.orderType==4&&item.izEvaluate==2">
							<view class="pointer bmBtn " @click.stop="xf.onlineUtils.route(`/pages/common/commentForm/index?id=${item.id}&orderId=${item.orderid}`)">去评价</view>
						</block>
						
					</view>
				</view>
				
			
			</view>
		</mescroll-uni>
		
		<jobSel ref="jobSel" @checkSel="checkSel"></jobSel>
	</view>
</template>

<script>
	import jobSel from "@/components/job/jobSel/index.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getLocal
	} from "@/libs/map.js"
	import {
		oddMore
	} from '@/api/userInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			jobSel
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					longitude:'', 
					latitude:'',
					orderType:'',
					oddJobName:"", 
					oddReleaseType:"", 
					staSalary:'',
					endSalary:'',
					staJobNum:'',
					endJobNum:'',
					salaryPayment:"", 
					workWay:"", 
					izTools:"" ,
					pageSize:10,
					pageNo:1
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [],
				selColor:false,
				userId:'',

			};
		},
		onShow(e) {
			let d=this.xf.onlineUtils.getUserInfo()
			this.userId=d.authStatus==1?d.companyId:d.id
			this.getJobStatus()
			this.mescroll.triggerDownScroll()
		},
		methods: {
			getJobStatus(){
				this.tabLis=[{text:'全部',value:''}];
				this.baseStore.getDictionaryDataAll('jjp_oddjob_order_type').then(res => {
					let d=res.sort((a,b)=>a.value-b.value)
					this.tabLis=this.tabLis.concat(this.xf.deepClone(d))
					console.log(this.tabLis)
				})
			},
			changeTab(v, i) {
				this.curretnTab = i;
				this.query.orderType=v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},

			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			//打开筛选弹窗
			openJobSel() {
				this.$refs.jobSel.openPoup()
			},
			changeValue(v) {
				this.query[v.type] = v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			checkSel(v) {
				this.query = {
					...this.query,
					...v
				};
				this.list = [];
				this.mescroll.resetUpScroll();
				for (let k in v) {
					if (v[k]) {
						this.selColor = true;
						return
					} else {
						this.selColor = false
					}
				}
				
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo=page.num;
				oddMore(this.query).then(res => {
					console.log(res)
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
				
			},
		}
	};
</script>
<style lang="scss">
	page {

		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	}
</style>
<style scoped lang="scss">
	.oddItem {
		padding: 34rpx 28rpx;
		background: #FFFFFF;
		// box-shadow: 1rpx 0rpx 10rpx 0rpx #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.selImg {
		width: 40rpx;
		height: 40rpx;
	}

	.tabItem {
		// margin-right: 58rpx;
		position: relative;

		.relative {
			z-index: 1;
		}

		&:first-child {
			margin-left: 20rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			font-weight: bold;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				z-index: 0;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}


	#scroll-view-h {
		/* #ifdef MP-WEIXIN */
		// height: calc(100vh - 240rpx);
		/* #endif */
		/* #ifdef H5 */
		// height: 100%;
		/* #endif */

	}


	.searchBox {
		position: relative;
		z-index: 1;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
	.platform-audit{
		width: 100%;
		height: 72rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
	}
</style>